<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1637 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M336.542.294h428.954a80.448 80.448 0 0 1 83.11 103.58L649.02 920.226a144.06 144.06 0 0 1-133.875 103.58H86.293a80.397 80.397 0 0 1-83.058-103.58L202.82 103.873A143.855 143.855 0 0 1 336.542.293z" fill="#ED1C24"/><path d="M692.724.294h428.852a80.397 80.397 0 0 1 83.058 103.58L1005.05 920.226a144.008 144.008 0 0 1-133.926 103.58h-428.75a80.346 80.346 0 0 1-83.11-103.58L558.85 103.873A144.11 144.11 0 0 1 692.724.293z" fill="#00569E"/><path d="M1121.627.294h428.801a80.397 80.397 0 0 1 83.11 103.58l-199.586 816.353a144.06 144.06 0 0 1-133.926 103.58H871.174a80.397 80.397 0 0 1-83.058-103.58L987.7 103.873A144.11 144.11 0 0 1 1121.627.293z" fill="#00898E"/><path d="m1208.78 595.774-40.48 172.922h13.97l-8.444 35.823h-14.022l-2.558 10.952h-49.64l2.558-10.952h-101.02l7.88-33.11h10.235l40.94-175.533 8.138-35.465h50.766l-3.992 17.963a85.72 85.72 0 0 1 25.588-13.101c12.64-3.275 86.078-4.606 86.078-4.606l-8.547 35.209zm-89.404 0-10.236 44.266a193.802 193.802 0 0 1 22.671-9.058 136.332 136.332 0 0 1 20.47-3.019l7.472-32.19zm-15.353 66.528-10.747 46.058a155.779 155.779 0 0 1 22.978-10.235 171.899 171.899 0 0 1 20.47-3.583l7.676-32.189zm-25.025 107.162h40.429l9.109-38.945h-40.429z" fill="#FFF"/><path d="M1231.655 567.832h54.093l.614 20.112c-.307 3.275 2.558 5.117 8.904 5.117h9.11l-8.137 33.316h-29.222c-25.588 1.842-34.953-9.11-34.339-21.29zm6.96 149.74h-51.636l6.908-29.682h58.903l6.602-27.175h-58.238l7.83-33.366h162.022l-7.932 33.366h-54.349l-6.601 27.175h54.707l-6.96 29.682h-58.852l-9.724 12.538h23.9l8.494 37.409a17.553 17.553 0 0 0 2.303 7.625 30.705 30.705 0 0 0 12.692 1.996h7.216l-8.547 36.488h-18.372c-2.814 0-7.062 0-12.845-.614a38.126 38.126 0 0 1-13.612-5.373 19.6 19.6 0 0 1-10.543-12.743l-8.239-37.256-24.206 36.847a42.783 42.783 0 0 1-38.177 20.47h-37.665l7.574-32.343h14.431a22.517 22.517 0 0 0 10.235-3.02 16.172 16.172 0 0 0 7.523-6.55zm-541.336-81.319h136.588l-7.83 32.65h-54.86l-6.705 27.789h55.782l-8.086 33.776h-55.781l-10.798 45.034c-1.28 5.118 13.664 5.732 19.037 5.732l27.686-3.685-8.905 37.103H720.36a54.86 54.86 0 0 1-14.431-1.945 16.07 16.07 0 0 1-10.236-7.37 14.687 14.687 0 0 1-4.298-14.43l14.38-59.876H674.71l8.24-34.34h31.114l6.602-27.788h-31.012z" fill="#FFF"/><path d="M784.994 585.743h56.293l-8.188 33.98h-76.763l-7.933 7.319c-3.224 3.377-4.657 1.996-9.058 4.4a52.66 52.66 0 0 1-24.871 6.5H689.96l7.88-32.752h7.37a25.588 25.588 0 0 0 12.59-1.945 26.867 26.867 0 0 0 7.573-10.593l12.487-25.588h55.935zm70.366-25.281h47.798l-5.526 24.104a118.727 118.727 0 0 1 24.717-16.12 216.524 216.524 0 0 1 33.879-7.523l77.172-.512-20.828 87.715a100.355 100.355 0 0 1-11.003 29.221 31.934 31.934 0 0 1-12.384 12.027 48.566 48.566 0 0 1-17.554 5.885c-5.117.46-12.998.614-23.796.716h-74.41l-16.632 69.446c-1.688 6.857-2.405 10.235-1.023 11.924a9.365 9.365 0 0 0 7.42 3.582l32.6-3.122-8.854 38.075h-36.847c-11.617 0-20.214 0-26.1-.717a29.221 29.221 0 0 1-15.71-3.121c-3.685-2.917-9.11-6.858-9.212-10.9a122.003 122.003 0 0 1 3.122-18.577zm106.958 88.739H884.07l-3.838 15.762h67.756a53.58 53.58 0 0 1 10.235 0zm-74.87-14.227a81.881 81.881 0 0 1 40.377-18.577c5.885-1.074 43.244-.767 43.244-.767l4.452-18.782h-78.964z" fill="#FFF"/><path d="M1002.132 699.865 999.112 721a28.402 28.402 0 0 1-7.522 15.814 32.548 32.548 0 0 1-25.178 9.058l-26.356 1.023 1.126 23.797c0 6.909 1.893 6.192 3.02 7.267a8.086 8.086 0 0 0 3.633 1.996l8.393-.307 25.127-1.536-8.24 34.902H944.1a99.076 99.076 0 0 1-40.94-4.35 14.33 14.33 0 0 1-6.295-13.715l-3.89-92.986h46.366l.563 19.037h11.105a15.353 15.353 0 0 0 7.983-1.381 8.649 8.649 0 0 0 2.815-5.118l3.53-14.79zm-614.875-443.13c-1.638 7.676-31.422 144.93-31.524 144.98a101.532 101.532 0 0 1-26.816 60.439 48.77 48.77 0 0 1-31.678 10.951 29.426 29.426 0 0 1-32.957-28.197l-.41-6.244 6.04-37.41c.05-.204 31.319-125.124 36.846-141.756a17.144 17.144 0 0 1 .511-1.944 420.357 420.357 0 0 1-72.413-.87 1270.18 1270.18 0 0 0-1.945 9.109L201.03 406.884l-2.764 11.924-5.117 39.047a56.651 56.651 0 0 0 6.857 29.068c14.483 25.588 55.986 29.324 79.374 29.324a156.495 156.495 0 0 0 77.684-18.117 116.22 116.22 0 0 0 49.692-77.735l3.582-13.971s32.19-130.038 37.717-146.926c0-.92.307-1.33.46-1.944a436.375 436.375 0 0 1-61.257-.82zm155.676 254.24c-21.647 0-29.119 0-54.348.87l-1.024-1.688c2.2-9.724 4.657-19.14 6.858-28.863l3.019-12.999c4.708-20.47 9.314-44.113 9.775-51.176.511-4.4 1.893-15.352-10.236-15.352a42.169 42.169 0 0 0-16.325 5.117c-3.019 10.798-9.16 41.35-12.026 55.219-6.192 29.426-6.653 32.752-9.416 47.132l-1.843 1.945c-22.21 0-29.937 0-55.474.87l-1.177-1.945c4.248-17.502 8.546-35.004 12.538-52.455a743.377 743.377 0 0 0 16.274-89.045l1.996-1.689c24.973-3.326 30.705-4.145 58.033-9.723l2.2 2.507-4.094 15.353c4.504-2.764 8.956-5.527 13.664-8.035a86.692 86.692 0 0 1 34.595-8.034 29.426 29.426 0 0 1 30.194 16.939c5.117 12.18 1.74 27.174-5.118 56.856l-3.429 14.995c-6.96 33.008-8.085 39.098-11.872 61.41zm80.192-1.023h-29.58c-8.187 0-16.017.41-28.095.972l-.716-1.023-.768-.921a161.254 161.254 0 0 1 6.704-21.34 150.763 150.763 0 0 0 6.09-21.546c3.787-16.427 6.09-28.095 7.779-38.074s2.763-18.219 3.94-27.789l1.024-.818 1.075-.87a1091.935 1091.935 0 0 0 59.926-9.724l.87 2.252c-2.507 10.235-5.117 20.47-7.471 30.705l-7.216 30.706c-5.118 21.698-6.755 29.937-7.881 35.516s-1.433 8.597-3.327 19.856l-1.177.972zm187.201-73.335c7.574-33.213 1.842-48.719-5.63-58.186a63.458 63.458 0 0 0-51.687-19.089 94.726 94.726 0 0 0-64.84 22.722 105.985 105.985 0 0 0-28.811 55.935c-4.657 20.47-10.235 57.06 23.49 70.367A99.23 99.23 0 0 0 717.8 514.2a91.041 91.041 0 0 0 68.883-27.124 119.188 119.188 0 0 0 23.643-50.459zm-56.293-2.456a117.704 117.704 0 0 1-12.794 35.413 20.47 20.47 0 0 1-16.07 10.235c-1.688 0-12.384 0-12.64-15.813a106.24 106.24 0 0 1 3.429-24.666c5.732-24.923 12.436-46.059 29.477-46.059 13.562.41 14.38 15.763 8.598 40.839zm502.749 37.921a29.63 29.63 0 0 1-20.982 10.235c-1.689 0-12.333 0-12.59-15.71a104.347 104.347 0 0 1 3.43-24.463c5.731-24.718 12.435-45.597 29.477-45.597 11.105 0 16.53 10.9 14.994 28.607l-2.712 12.282c-1.842 7.728-3.94 15.353-5.834 22.978a51.176 51.176 0 0 1-5.783 11.668zm85.361-111.102c-26.97 5.117-34.083 6.038-59.927 9.62l-1.995 1.638-.87 6.295a36.54 36.54 0 0 0-18.782-15.865 72.106 72.106 0 0 0-61.666 22.518 105.217 105.217 0 0 0-28.812 55.525c-4.657 20.061-10.236 56.652 23.49 69.855a66.528 66.528 0 0 0 29.886 5.118 49.64 49.64 0 0 0 28.556-13.357l-2.405 9.467 1.535 1.945c24.155-1.126 31.575-1.126 57.624-.819l2.405-1.945c3.787-22.26 7.42-43.96 17.348-86.998 4.709-20.47 9.673-40.94 14.585-61.053zm-393.08 149.995c-21.647 0-29.068 0-54.349.87l-1.023-1.688c2.252-9.724 4.657-19.14 6.909-28.863l2.968-12.999c4.708-20.47 9.314-44.113 9.877-51.176.41-4.4 1.842-15.352-10.542-15.352a42.271 42.271 0 0 0-16.223 5.117c-3.02 10.798-9.16 41.35-12.129 55.219-6.14 29.426-6.653 32.752-9.416 47.132l-1.842 1.945c-22.16 0-29.887 0-55.424.87l-1.177-1.945c4.248-17.502 8.547-35.004 12.538-52.455a754.175 754.175 0 0 0 16.274-89.045l1.996-1.689c24.923-3.326 30.706-4.145 57.982-9.723l2.2 2.507-3.991 15.353c4.452-2.764 8.956-5.527 13.613-8.035a86.999 86.999 0 0 1 34.594-8.034 29.58 29.58 0 0 1 30.245 16.939c5.118 12.18 1.689 27.174-5.117 56.856l-3.378 14.995c-7.011 33.008-8.137 39.098-11.924 61.41zm198.05-173.792a57.01 57.01 0 0 1-29.222 38.638 92.884 92.884 0 0 1-41.247 6.448h-9.723l.87-3.94s17.706-77.276 17.655-76.764l.512-3.94.358-3.122 7.011.716s36.59 3.275 37.512 3.429a30.296 30.296 0 0 1 16.274 38.535zm-23.336-80.704-17.963.358c-46.621.46-65.351.358-73.028-.614l-1.944 9.468-16.632 77.48-41.862 172.41c40.685-.563 57.419-.614 64.379 0l11.156-53.734c.051-.103 8.086-33.776 8.598-34.85a18.065 18.065 0 0 1 5.117-5.118h3.634a172.667 172.667 0 0 0 105.882-22.927 112.586 112.586 0 0 0 42.015-66.528 104.705 104.705 0 0 0 2.917-23.49 49.743 49.743 0 0 0-8.444-29.887c-15.864-21.903-47.286-22.159-83.825-22.568zm-477.93 125.073c14.227-9.825 16.07-23.592 3.94-30.705a49.231 49.231 0 0 0-47.746 5.117c-14.38 9.929-16.07 23.695-3.992 30.706a49.077 49.077 0 0 0 47.798-5.118zm859.342-23.95-2.15-2.456c-26.56 5.475-31.37 6.345-55.781 9.62l-1.945 1.638v1.228-.307c-18.32 42.118-17.707 33.009-32.496 66.017v-4.043l-3.685-71.646-2.252-2.456c-27.942 5.476-28.607 6.346-54.348 9.62l-2.098 1.638c0 .973 0 1.945-.359 2.917h.256a388.935 388.935 0 0 1 5.63 38.843c1.432 12.691 3.48 25.588 5.117 38.228 2.61 20.88 3.992 31.473 7.062 63.407-17.4 28.863-21.493 39.712-38.074 64.993l-11.873 18.781a9.058 9.058 0 0 1-4.196 3.89 20.47 20.47 0 0 1-7.83 1.125h-9.007l-7.523 33.776 33.622-.511a42.066 42.066 0 0 0 38.587-21.955l20.47-35.823z" fill="#FFF"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconUnionpay extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
